<template>
  <header>
    <el-form-item label="账户名:" label-width="69px" class="label-right-align">
      <el-input v-model="queryData.userName" type="text" clearable></el-input>
    </el-form-item>

    <el-form-item label="昵称:" label-width="59px" class="label-right-align">
      <el-input v-model="queryData.niceName" type="text" clearable></el-input>
    </el-form-item>

    <el-button @click.prevent="queryUserList">
      <el-icon><Search /></el-icon>
      <span>查询</span>
    </el-button>

    <el-button @click.prevent="addUser">
      <el-icon><DocumentAdd /></el-icon>
      <span>增加</span>
    </el-button>

    <el-button @click.prevent="deleteBatchUser">
      <el-icon><Delete /></el-icon>
      <span>删除</span>
    </el-button>

    <el-button @click.prevent="allowBatchRole">
      <el-icon><Setting /></el-icon>
      <span>分配角色</span>
    </el-button>
  </header>
  <el-table
    ref="tableInfo"
    :data="tableData"
    style="width: 100%"
    stripe
    border
    @sort-change="tabelSort"
    :height="tHeight"
  >
    <el-table-column prop="userUuid" label="用户编码" width="50" type="selection" />
    <el-table-column prop="userName" label="用户名称" width="180" sortable="custom" />
    <el-table-column prop="niceName" label="呢称" width="180" sortable="custom" />
    <el-table-column prop="email" label="邮箱" width="180" sortable="custom" />
    <el-table-column prop="mobile" label="手机" sortable="custom" />
    <el-table-column prop="userUuid" label="操作">
      <template #default="obj">
        <el-button link type="primary" size="small" @click.prevent="editRow(obj)">
          编辑
        </el-button>

        <el-button link type="success" size="small" @click.prevent="deleteUser(obj)">
          删除
        </el-button>

        <el-button link type="primary" size="small" @click.prevent="allowRole(obj)">
          分配
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    layout="total,sizes,->,prev, pager, next,jumper"
    :total="total"
    :default-page-size="queryData.rp"
    :page-sizes="[10, 20, 50, 100]"
    v-model:current-page="queryData.page"
    @change="pageChang"
  />

  <AddUser></AddUser>
  <EditUser></EditUser>
  <DeleteUser></DeleteUser>
  <AllowRole></AllowRole>
</template>
<script>
import * as icons from "@element-plus/icons-vue";
import axios from "axios";
import AddUser from "../components/AddUser.vue";
import EditUser from "../components/EditUser.vue";
import DeleteUser from "../components/DeleteUser.vue";
import AllowRole from "../components/AllowRole.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import $ from "jquery";
export default {
  name: "UserPage",
  components: {
    ...icons,
    AddUser,
    EditUser,
    DeleteUser,
    AllowRole,
  },
  data: function () {
    return {
      dialogVisible: false,
      queryData: {
        page: 1,
        rp: 10,
        sortname: "",
        sortorder: "asc",
        userName: "",
        niceName: "",
      },
      total: 600,
      tHeight: 600,

      tableData: [],
    };
  },
  methods: {
    editRow(obj) {
      // console.info(`table index:${obj.$index} row:${JSON.stringify(obj.row)}`);
      this.$bus.emit("editDialog", obj.row);
    },
    tabelSort(obj) {
      // console.info(`table tabelSort:${JSON.stringify(obj)}`);
      this.queryData.sortname = obj.prop;
      this.queryData.sortorder = "asc";
      if (obj.order === "descending") {
        this.queryData.sortorder = "desc";
      }
      this.queryUserList();
    },
    pageChang(currentPage, pageSize) {
      this.queryData.rp = pageSize;
      this.queryData.page = currentPage;
      this.queryUserList();
    },
    queryUserList() {
      let that = this;
      axios
        .post("/api/user/queryUserListByPage", that.queryData)
        .then((data) => {
          // console.info(`queryUserListByPage success:${JSON.stringify(data)}`);
          if (data.data) {
            that.tableData = [...data.data];
          }
        })
        .catch((err) => {
          console.error(`queryUserListByPage fail:${JSON.stringify(err)}`);
        }); //发送查询

      axios
        .post("/api/user/queryUserListTotal", that.queryData)
        .then((data) => {
          // console.info(`queryUserListTotal success:${JSON.stringify(data)}`);
          if (data && data.data && data.data.success) {
            that.total = data.data.code;
          }
        })
        .catch((err) => {
          console.error(`queryUserListTotal fail:${JSON.stringify(err)}`);
        }); //发送总数量
    },
    addUser() {
      // this.dialogVisible = true;
      this.$bus.emit("openDialog");
    },
    deleteUser(obj) {
      this.$bus.emit("deleteDialog", [obj.row]);
    },
    allowRole(obj) {
      this.$bus.emit("allowRoleDialog", obj.row.userUuid);
    },
    deleteBatchUser() {
      let tableList = this.$refs["tableInfo"].getSelectionRows();
      let userUuidArray = [];
      tableList.some((item) => {
        userUuidArray.push(item);
      });
      this.$bus.emit("deleteDialog", userUuidArray);
    },

    allowBatchRole() {
      let tableList = this.$refs["tableInfo"].getSelectionRows();
      let userUuidArray = [];
      if (tableList.length === 0) {
        ElMessageBox.alert("请选择记录");
        return;
      }
      tableList.some((item) => {
        userUuidArray.push(item["userUuid"]);
      });
      this.$bus.emit("allowRoleDialog", userUuidArray.join(","));
    },
  },
  mounted() {
    let that = this;
    let dHeight = $(document).height();
    this.tHeight = dHeight - 25 - 40 - 100;
    console.info(`dHeight:${dHeight}`);
    this.queryUserList();
    this.$bus.on("queryUserList", () => {
      that.queryUserList();
    });
  },
  unmounted() {
    this.$bus.off("queryUserList");
  },
};
</script>
<style scoped>
.btn > i {
  margin-right: 5px;
}
.btn {
  margin: 5px;
}
header {
  display: flex;
}
.el-button {
  margin: 2px 0 0 5px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
